<div id="wrapper">
  <div class="flex flex-row">
    <!-- Search Bar -->
    <mat-form-field class="search-form-field" color="accent">
      <mat-label>{{ 'catalog_browser_page.search' | translate }}</mat-label>
      <mat-icon matPrefix>search</mat-icon>
      <input matInput [formControl]="searchText" />
      <button
        *ngIf="searchText.value"
        mat-icon-button
        matSuffix
        (click)="searchText.setValue('')">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>

    <!-- Connector Endpoints -->
    <mat-form-field
      class="search-form-field mat-hint-text-ellipsis"
      color="accent"
      style="margin-left: 15px"
      matBadgeColor="warn"
      [matBadge]="
        data.requestTotals.isSomeFailed
          ? data.requestTotals.numFailed
          : undefined
      ">
      <mat-label>{{
        'catalog_browser_page.con_endpoints' | translate
      }}</mat-label>
      <mat-icon matPrefix>link</mat-icon>
      <input
        matInput
        placeholder="https://other-connector.com/control/api/v1/ids/data, ..."
        [(ngModel)]="customProviders"
        (input)="onCatalogUrlsChange()" />
      <mat-hint
        *ngIf="presetProvidersMessage"
        [matTooltip]="presetProvidersMessage"
        >{{ presetProvidersMessage }}</mat-hint
      >
      <button
        *ngIf="!data.requestTotals.isDone"
        matSuffix
        mat-icon-button
        [matTooltip]="'tooltip.details' | translate"
        (click)="onShowFetchDetails()">
        <mat-progress-spinner
          matSuffix
          style="width: 20px; height: 20px"
          diameter="20"
          color="primary"
          mode="indeterminate">
        </mat-progress-spinner>
      </button>
      <button
        *ngIf="data.requestTotals.isDone && data.requestTotals.isSomeFailed"
        matSuffix
        color="warn"
        mat-icon-button
        [matTooltip]="'tooltip.failed_details' | translate"
        (click)="onShowFetchDetails()">
        <mat-icon>warning</mat-icon>
      </button>
      <button
        *ngIf="data.requestTotals.isDone && !data.requestTotals.isSomeFailed"
        matSuffix
        color="primary"
        mat-icon-button
        [matTooltip]="'tooltip.details' | translate"
        (click)="onShowFetchDetails()">
        <mat-icon>info</mat-icon>
      </button>
    </mat-form-field>

    <!-- Spacer -->
    <div style="flex-grow: 1"></div>

    <!-- Pagination -->
    <mat-paginator
      *ngIf="data.requestTotals.isSomeReady"
      [hidePageSize]="true"
      [disabled]="true"
      [pageSize]="data.filteredDataOffers.length"
      [length]="data.numTotalContractOffers">
    </mat-paginator>
  </div>
  <div class="flex flex-row justify-center">
    <empty-state
      *ngIf="data.requestTotals.isNothingReady && !data.requests.length"
      class="min-h-[35rem]"
      [emptyMessage]="
        'catalog_browser_page.enter_endpoints' | translate
      "></empty-state>
    <loading-state
      *ngIf="
        data.requestTotals.isNothingReady &&
        data.requests.length &&
        !data.requestTotals.isDone
      "
      class="min-h-[35rem]"></loading-state>
    <error-state
      *ngIf="data.requestTotals.isAllFailed"
      class="min-h-[35rem]"
      [error]="data.requestTotals.results[0].errorOrUndefined"></error-state>
    <empty-state
      *ngIf="data.requestTotals.isSomeReady && !data.filteredDataOffers.length"
      class="min-h-[35rem]"
      [emptyMessage]="
        'catalog_browser_page.no_contract_offers' | translate
      "></empty-state>
  </div>
  <div
    *ngIf="data.requestTotals.isSomeReady && !!data.numTotalContractOffers"
    class="flex flex-row flex-wrap">
    <data-offer-cards
      [dataOffers]="data.filteredDataOffers"
      (dataOfferClick)="onDataOfferClick($event)"></data-offer-cards>
  </div>
</div>
